<template>
  <div class="login-container">
    <!-- 动态粒子背景 -->
    <div class="particle-background">
      <div
        v-for="(particle, index) in particles"
        :key="index"
        class="particle"
        :style="particle.style"
      />
    </div>

    <!-- 登录卡片 -->
    <div class="login-card">
      <!-- 头部 -->
      <div class="card-header">
        <h1 class="system-title">
          区块链商城管理端
        </h1>
        <p class="welcome-text">
          欢迎回来，请登录您的账户
        </p>
      </div>

      <!-- 登录表单 -->
      <el-form
        ref="dataFormRef"
        :model="dataForm"
        :rules="dataRule"
        status-icon
        @keyup.enter="dataFormSubmit()"
      >
        <!-- 用户名输入 -->
        <el-form-item prop="userName">
          <el-input
            v-model="dataForm.userName"
            placeholder="请输入账号"
            class="input-with-icon"
          >
            <template #prefix>
              <i class="el-icon-user input-icon" />
            </template>
          </el-input>
        </el-form-item>

        <!-- 密码输入 -->
        <el-form-item prop="password">
          <el-input
            v-model="dataForm.password"
            type="password"
            placeholder="请输入密码"
            show-password
            class="input-with-icon"
          >
            <template #prefix>
              <i class="el-icon-lock input-icon" />
            </template>
          </el-input>
        </el-form-item>

        <!-- 操作区域 -->
        <div class="action-area">
          <a
            class="forgot-password"
            @click="showForgotPasswordDialog = true"
          >忘记密码？</a>
        </div>

        <!-- 登录按钮 -->
        <el-form-item>
          <el-button
            class="login-btn"
            :loading="isSubmitting"
            @click="dataFormSubmit"
          >
            {{ isSubmitting ? '登录中...' : '立即登录' }}
            <i class="el-icon-arrow-right btn-arrow" />
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 底部信息 -->
      <div class="footer">
        <span class="version" />
        <div class="social-links">
          <!--          <a class="link-item">用户协议</a>-->
          <!--          <a class="link-item">隐私政策</a>-->
          <a
            class="link-item"
            href="https://gitee.com/cai2904623189/admin_go_8080.git"
          >项目源码</a>
        </div>
      </div>
    </div>
  </div>

  <!-- 修改后的弹窗 -->
  <el-dialog
    v-model="showForgotPasswordDialog"
    title="密码重置帮助"
    width="500px"
  >
    <div class="contact-admin">
      <el-icon
        :size="60"
        color="#E6A23C"
        class="warning-icon"
      >
        <warning />
      </el-icon>
      <h3>请联系系统管理员重置密码</h3>
      <div class="contact-info">
        <p>📞 联系电话：110</p>
        <p>📧 服务邮箱：123456789@qq.com</p>
        <p>🏢 办公地址：广州商学院</p>
      </div>
    </div>

    <template #footer>
      <el-button
        type="primary"
        class="confirm-btn"
        @click="showForgotPasswordDialog = false"
      >
        我知道了
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import cookie from 'vue-cookies'
import http from '@/utils/http'

const showForgotPasswordDialog = ref(false)
// 响应式数据
const dataForm = ref({
  userName: '',
  password: ''
})
const dataFormRef = ref(null)
const isSubmitting = ref(false) // 统一使用 isSubmitting 控制提交状态
const router = useRouter()

// 表单验证规则
const dataRule = {
  userName: [{
    required: true,
    message: '请输入账号',
    trigger: 'blur'
  }],
  password: [{
    required: true,
    message: '请输入密码',
    trigger: 'blur'
  }]
}

// 事件监听处理
const handleKeyup = (e) => {
  if (e.key === 'Enter') dataFormSubmit()
}

// 表单提交
const dataFormSubmit = () => {
  dataFormRef.value?.validate(valid => {
    if (valid && !isSubmitting.value) {
      login()
    }
  })
}
let isSubmit = false
// 登录逻辑
const login = () => {
  if (isSubmit) {
    return
  }
  isSubmit = true
  http({
    url: http.adornUrl('/adminLogin'),
    method: 'post',
    data: http.adornData({
      userName: dataForm.value.userName,
      // passWord: encrypt(dataForm.value.password),
      passWord: dataForm.value.password

    })
  })
    .then(({ data }) => {
      cookie.set('Authorization', data.accessToken)
      router.replace({ name: 'home' })
    })
    .catch(() => {
      isSubmit = false
    })
}
// 生命周期
onMounted(() => {
  document.addEventListener('keyup', handleKeyup)
})

onBeforeUnmount(() => {
  document.removeEventListener('keyup', handleKeyup)
})
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
      135deg,
      #667eea,
      #6d739d,
      #6b46c1,
      #667eea
  ); // 增加颜色节点
  background-size: 400% 400%; // 扩大背景尺寸
  overflow: hidden;
  position: relative;
  animation: gradientFlow 5s ease infinite; // 添加动画
}

/* 新增流动渐变动画 */
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.particle-background {
  position: absolute;
  width: 100%;
  height: 100%;

  .particle {
    position: absolute;
    border-radius: 50%;
    animation: float 6s infinite ease-in-out;
    opacity: 0.15;
    filter: blur(1px);
  }
}

.login-card {
  width: 440px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
  transform: translateY(0);
  animation: cardEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;

  .card-header {
    text-align: center;
    margin-bottom: 36px;

    .logo-wrapper {
      width: 80px;
      height: 80px;
      margin: 0 auto 20px;
      border-radius: 50%;
      background: linear-gradient(45deg, #667eea, #764ba2);
      padding: 12px;

      .logo-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
      }
    }

    .system-title {
      font-size: 24px;
      color: #2d3748;
      margin: 0 0 8px;
      letter-spacing: 1px;
    }

    .welcome-text {
      color: #718096;
      font-size: 14px;
      margin: 0;
    }
  }
}

.input-with-icon {
  :deep(.el-input__inner) {
    height: 48px;
    padding-left: 40px;
    border-radius: 8px;
    transition: all 0.3s ease;

    &:focus {
      border-color: #667eea;
      box-shadow: 0 2px 6px rgba(102, 126, 234, 0.2);
    }
  }

  .input-icon {
    font-size: 18px;
    color: #a0aec0;
    margin-left: 8px;
  }
}

.action-area {
  display: flex;
  justify-content: flex-end; /* 从 space-between 改为 flex-end */
  align-items: center;
  margin: 18px 0 30px;

  .forgot-password {
    color: #718096;
    font-size: 13px;
    transition: color 0.3s;

    &:hover {
      color: #667eea;
    }
  }
}

.login-btn {
  width: 100%;
  height: 48px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border: none;
  color: white;
  font-size: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  }

  .btn-arrow {
    margin-left: 8px;
    transition: transform 0.3s;
  }

  &:hover .btn-arrow {
    transform: translateX(3px);
  }
}

.footer {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #edf2f7;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .version {
    color: #a0aec0;
    font-size: 12px;
  }

  .social-links {
    display: flex;
    gap: 16px;

    .link-item {
      color: #718096;
      font-size: 12px;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #667eea;
      }
    }
  }
}

/* 动画定义 */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes cardEntrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 768px) {
  .login-card {
    width: 90%;
    padding: 30px;
    margin: 0 20px;
  }

  .particle-background .particle {
    display: none;
  }
}
.contact-admin {
  text-align: center;
  padding: 20px;

  .warning-icon {
    margin-bottom: 20px;
    animation: pulse 1.5s infinite;
  }

  h3 {
    color: #303133;
    margin-bottom: 25px;
    font-size: 18px;
  }

  .contact-info {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    text-align: left;

    p {
      margin: 12px 0;
      color: #606266;
      display: flex;
      align-items: center;

      &::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #409EFF;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }
}

.confirm-btn {
  width: 120px;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

</style>
